<template>
  <div>
    <!-- 小播放器 -->
    <div class="playerNull" style="width: 100%; height: 36px"></div>
    <div class="mini-play" v-if="SongDetail">
      <div class="title" @click="showPlay = true">
        <!-- 控制图片的旋转 -->
        <div :class="['img', iconPlay ? 'pause' : 'play']">
          <img :src="SongDetail.al.picUrl + '?param=140y140'" alt="" />
        </div>
        <h3>
          {{ SongDetail.name }}-<span>{{ SongDetail.ar[0].name }}</span>
        </h3>
      </div>
      <div class="icons">
        <div class="circle" @click="togglePlay">
          <van-circle
            v-model="currentPlay"
            :rate="0"
            :size="24"
            :speed="100"
            :layer-color="'#E3E3E3'"
            :color="'#4D4D4D'"
          />
          <!-- 播放按钮的切换 -->
          <span
            :class="[
              'iconfont',
              iconPlay ? 'icon-bofang' : 'icon-zantingtingzhi',
            ]"
          ></span>
        </div>
        <!-- 更多按钮 -->
        <span class="iconfont icon-zanting1" @click="alloff"></span>
      </div>
    </div>

    <!-- 大播放器 -->
    <div class="player" v-show="showPlay">
      <!-- 背景 -->
      <div
        class="bgs"
        v-if="SongDetail"
        :style="{
          'background-image': 'url(' + SongDetail.al.picUrl + '?param=140y140)',
        }"
      ></div>
      <div class="view" v-if="SongDetail">
        <div class="topNav">
          <div class="icons">
            <!-- 按钮 -->
            <span
              class="iconfont icon-arrow-down-bold"
              @click="showPlay = false"
            ></span>
          </div>
          <div class="title">
            <h2>{{ SongDetail.name }}</h2>
            <p>{{ SongDetail.ar[0].name }}</p>
          </div>
          <div class="icons">
            <span class="iconfont icon-31fenxiang"></span>
          </div>
        </div>

        <div class="content" @click="toggleLyrics = !toggleLyrics">
          <!-- 大图片 -->
          <div class="bg" v-show="toggleLyrics">
            <!-- 控制图片的旋转 -->
            <div :class="['img', iconPlay ? 'pause' : 'play']">
              <img :src="SongDetail.al.picUrl" />
            </div>
          </div>
          <!-- 歌词 -->
          <div class="lyrics" v-show="!toggleLyrics">
            <ul :style="{ top: lyricTop + 'px' }">
              <li
                :class="{ con: currentRow == index }"
                v-for="(item, index) in lyric"
                :key="index"
              >
                {{ item.text }}
              </li>
            </ul>
          </div>
        </div>
        <div class="Buttons">
          <div class="range">
            <van-slider
              v-model="currentPlay"
              :button-size="6"
              :active-color="'#ff0000'"
              @change="sliderChangeFun"
              @drag-start="sliderdragStart"
              @drag-end="sliderdragEnd"
            />
            <div class="timeLeft">{{ timeLeft | Times }}</div>
            <div class="timeRight">{{ timeRight | Times }}</div>
          </div>
          <div class="btn">
            <!-- 切换播放类型 -->
            <div class="icon" @click="isPlayerType">
              <span
                v-if="playerType == 1"
                class="iconfont icon-xunhuan3"
              ></span>
              <span
                v-else-if="playerType == 2"
                class="iconfont icon-suiji3"
              ></span>
            </div>
            <div class="icon">
              <!-- 上一首 -->
              <span
                class="iconfont icon-shangyiqu-wangyiicon"
                @click="prveFun"
              ></span>
            </div>
            <div class="icon play" @click="togglePlay">
              <span
                :class="[
                  'iconfont',
                  iconPlay ? 'icon-bofang' : 'icon-zantingtingzhi',
                ]"
              ></span>
            </div>
            <div class="icon">
              <!-- 下一首 -->
              <span class="iconfont icon-shangyiqu" @click="nextFun"></span>
            </div>
            <div class="icon">
              <!-- 更多按钮 -->
              <span class="iconfont icon-bofangliebiao" @click="alloff"></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 播放列表 -->
    <div class="playlist" v-show="offs">
      <div class="boxtop" @click="allno"></div>
      <div :class="['box', offs ? 'boxb' : 'boxc']">
        <ul>
          <div class="at">当前播放<span>(12)</span></div>
          <div class="boxlist">
            <div class="left">
              <span class="iconfont icon-xunhuan1"></span>
              循环列表
            </div>
            <div class="rigth">
              <span class="iconfont icon-xiazai2"></span>
              <span class="iconfont icon-wenjian"></span>
              <span class="iconfont icon-shanchu"></span>
            </div>
          </div>
          <li>
            <div class="listop">哪里都是你<span>-队长</span></div>
            <div class="iconfont icon-close"></div>
          </li>
          <li>
            <div class="listop">下雨看世界<span>-古巨基</span></div>
            <div class="iconfont icon-close"></div>
          </li>
          <li>
            <div class="listop">边城<span>-Mr.</span></div>
            <div class="iconfont icon-close"></div>
          </li>
          <li>
            <div class="listop">忘川<span>-陈禧仪</span></div>
            <div class="iconfont icon-close"></div>
          </li>
          <li>
            <div class="listop">好朋友<span>-梁汉文</span></div>
            <div class="iconfont icon-close"></div>
          </li>
          <li>
            <div class="listop">情人知己<span>-叶倩文</span></div>
            <div class="iconfont icon-close"></div>
          </li>
          <li>
            <div class="listop">最冷一天<span>-陈奕迅</span></div>
            <div class="iconfont icon-close"></div>
          </li>
        </ul>
      </div>
    </div>
    <!-- html5 音频 audio -->
    <!-- ref="audio"获取控件 -->
    <audio
      :src="SongUrl"
      ref="audio"
      @timeupdate="ontimeupdateFun"
      @loadeddata="onloadeddataFun"
      @ended="onendedFun"
    ></audio>
  </div>
</template>

<script>
import { getSongDetail, getSongUrl, getLyric } from "../../api/player";
import { getPlaylistDetail } from "../../api/song"; //获取歌单的
export default {
  props: ["playerId", "listId"],
  data() {
    return {
      currentPlay: 0, //歌曲圆形进度条
      SongDetail: null, //歌曲详情信息
      SongUrl: null, //歌曲url
      iconPlay: true, //切换按钮
      timeLeft: 0, //滑块左边时间
      timeRight: 0, //滑块右边时间
      playerlists: null, //歌单列表
      playerType: 1, //播放类型 1 列表播放 2随机播放
      showPlay: false, //大播放器显示
      toggleLyrics: false, //歌词切换
      lyric: [], //歌词
      lyricTop: 210, //歌词移动初始值
      currentRow: 0, //歌词高亮
      offs: false, //播放列表
    };
  },
  methods: {
    getSongDetailFun() {
      //请求歌曲详情
      getSongDetail({ ids: this.playerId }).then((data) => {
        // console.log(data.songs[0],"请求歌曲详情");
        this.SongDetail = data.songs[0];
      });
    },
    getSongUrlFun() {
      // 请求歌曲url
      getSongUrl({ id: this.playerId }).then((data) => {
        // console.log(data.data[0].url);
        this.SongUrl = data.data[0].url;
      });
    },
    getLyricFun() {
      //请求歌词方法
      getLyric({ id: this.playerId }).then((data) => {
        // console.log(data.lrc.lyric);
        this.formatLyric(data.lrc.lyric);
      });
    },
    // 处理歌词
    formatLyric(text) {
      this.lyric = []; //放歌词的数组
      let arr = text.split("\n"); //把字符串转数组
      let row = arr.length; //数字长度
      for (let i = 0; i < row; i++) {
        // [00:49.601]得到好处的你 明示不想失去绝世好友
        let temp_row = arr[i];
        let temp_arr = temp_row.split("]"); // '[00:49.601' , '得到好处的你 明示不想失去绝世好友'
        let obj = {}; //空对象
        if (temp_arr[0]) {
          //判断是否有歌词
          let time_arr = temp_arr[0]
            .substring(1, temp_arr[0].length - 1)
            .split(":"); //00:49.601
          let s = time_arr[0] * 60 + Number(time_arr[1]); //得到当前秒数
          obj.text = temp_arr[1]; //歌词
          obj.time = s; //时间
          obj.height = temp_arr[1].length > 47 ? 2 : 1; //字符串长度控制
          if (temp_arr[1].length) {
            this.lyric.push(obj); //每一行处理好数据
          }
        }
      }
      console.log(this.lyric);
    },
    // 播放器切换
    togglePlay() {
      if (this.iconPlay) {
        this.$refs.audio.play(); //播放
        this.ontimeupdateFun();
      } else {
        this.$refs.audio.pause(); //暂停
      }
      this.iconPlay = !this.iconPlay;
    },
    //当音频事件==时间发生改变触发
    ontimeupdateFun() {
      // console.log('音频发生改变');
      // console.log(this.$refs)//内置方法
      // currentTime	设置或返回音频中的当前播放位置（以秒计）
      // duration	返回当前音频的长度（以秒计)
      this.timeLeft = this.$refs.audio.currentTime; //获取歌曲实时时间
      // this.timeRight = this.$refs.audio.duration;//获取歌曲总时长
      // 计算播放时间进度条
      this.currentPlay = (this.timeLeft / this.timeRight) * 100;
      //歌词移动效果
      this.lyrictopPlay();
    },
    // 歌词移动
    lyrictopPlay() {
      let heightTop = 330;
      for (let i = 0; i < this.lyric.length; i++) {
        heightTop = heightTop - 36 * this.lyric[i].height;
        //120.600 <= 110.333   false
        //120.600 <= 120.600   true
        //120.600 <= 130.333   true
        if (this.timeLeft <= this.lyric[i].time) {
          this.lyricTop = heightTop;
          this.currentRow = i - 1; //选中效果
          break;
        }
      }
    },
    // 音频数据加载完成
    onloadeddataFun() {
      this.togglePlay();
      this.timeRight = this.$refs.audio.duration; //获取歌曲总时长
    },
    //拖动进度条事件
    sliderChangeFun(value) {
      // console.log("拖动",value)
      // (进度条位置/100)*总时间
      let currentTime = (value / 100) * this.timeRight;
      this.timeLeft = currentTime;
      this.$refs.audio.currentTime = currentTime;
    },
    sliderdragStart() {
      this.$refs.audio.pause(); //暂停
    },
    sliderdragEnd() {
      this.$refs.audio.play(); //暂停
    },
    //下一首事件
    nextFun() {
      // console.log("下一首")
      // 获取播放列表中下标
      let index = this.playerlists.findIndex(
        (item) => item.id == this.playerId
      );
      // 让下标加一，最后一首歌，回到歌单第一首歌
      index = index + 1 > this.playerlists.length - 1 ? 0 : index + 1;
      // 修改父组件值。重新初始化所有播放器数据
      this.$emit("get-player-id", this.playerlists[index].id);
    },
    // 上一首歌
    prveFun() {
      // 获取播放列表中下标
      let index = this.playerlists.findIndex(
        (item) => item.id == this.playerId
      );
      // 让下标减一，第一首歌，回到歌单最后一首歌
      index = index - 1 < 0 ? this.playerlists.length - 1 : index - 1;
      // 修改父组件值。重新初始化所有播放器数据
      this.$emit("get-player-id", this.playerlists[index].id);
    },
    //播放类型
    isPlayerType() {
      this.playerType = this.playerType == 1 ? 2 : 1;
    },
    // 歌曲播放结束后触发
    onendedFun() {
      if (this.playerType == 1) {
        //列表播放
        this.nextFun(); //调用下一首方法
      } else if (this.playerType == 2) {
        //随机播放
        //随机生成数下标
        let index = parseInt(Math.random() * this.playerlists.length);
        //把下标赋给"get-player-id"
        this.$emit("get-player-id", this.playerlists[index].id);
      }
    },
    alloff() {
      this.offs = true;
      console.log(this.offs, "开");
    },
    allno() {
      this.offs = false;
      console.log(this.offs, "关");
    },
  },
  //监听传入id的变化
  watch: {
    playerId: function () {
      this.iconPlay = true; //重置播放状态
      console.log("切换音乐", this.playerId);
      this.getSongDetailFun(); //获取歌曲详情
      this.getSongUrlFun(); //获取歌曲url
      this.getLyricFun(); //获取歌词
    },
    listId: function () {
      getPlaylistDetail({ id: this.listId }).then((data) => {
        this.playerlists = data.playlist.tracks;
        console.log(this.playerlists);
      });
    },
  },
  //过滤器
  filters: {
    Times(data) {
      let m = parseInt(data / 60); //分
      let s = parseInt(data % 60); //秒
      if (m == 0 && s == 0) {
        return "0.00";
      } else {
        return m + ":" + (s < 10 ? "0" + s : s);
      }
    },
  },
};
</script>

<style lang="less" >
//大播放器
.player {
  // overflow: hidden;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #1c1c1e;
  z-index: 800; //-1-999
  .bgs {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url("https://p1.music.126.net/4uiy7t752A4HHF2bwqVj1A==/109951164812388197.jpg?param=140y140")
      no-repeat center center;
    background-size: 3000px;
    filter: blur(30px);
    z-index: 700;
  }
  .view {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 900;
    .topNav {
      display: flex;
      .icons {
        width: 44px;
        height: 45px;
        text-align: center;
        line-height: 45px;
        .iconfont {
          font-size: 24px;
          color: #fff;
        }
      }
      .title {
        flex: 1;
        margin-top: 5px;
        text-align: center;
        color: #fff;
        p {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
    .content {
      height: 70%;
      width: 100%;
      text-align: center;
      position: relative;
      .bg {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
        width: 273px;
        height: 273px;
        background: url("../../assets/img/singlecover.png") no-repeat center
          center;
        background-size: 100%;
        border-radius: 50%;
        .img {
          position: absolute;
          top: 0px;
          left: 0px;
          right: 0px;
          bottom: 0px;
          margin: auto;
          width: 165px;
          height: 165px;
          border-radius: 50%;
          img {
            width: 165px;
            height: 165px;
            border-radius: 50%;
          }
          &.play {
            animation: rotate 20s linear infinite;
          }
          &.pause {
            animation-play-state: paused;
          }
        }
      }
      // 歌词样式
      .lyrics {
        width: 100%;
        height: 95%;
        position: relative;
        overflow: hidden;
        margin-top: 25px;
        background: linear-gradient(to top, red 20%);
        ul {
          transition: all 0.2s linear;
          position: absolute;
          text-align: center;
          top: 210px;
          left: 0px;
          width: 100%;
          li {
            padding: 0px 20px;
            line-height: 36px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 16px;
            &.con {
              color: #fff;
              font-weight: bold;
            }
          }
        }
      }
    }
    .Buttons {
      position: absolute;
      left: 0px;
      bottom: 0px;
      width: 100%;
      height: 100px;
      .range {
        width: 76.5%;
        margin: 0 auto;
        position: relative;
        .timeLeft,
        .timeRight {
          position: absolute;
          left: -30px;
          top: -6px;
          font-size: 12px;
          color: #fff;
          transform: scale(0.7);
        }
        .timeRight {
          left: auto;
          right: -30px;
        }
      }
      .btn {
        width: 76.5%;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        height: 37px;
        line-height: 37px;
        margin-top: 14px;
        background: transparent;
        .icon {
          width: 37px;
          height: 37px;
          line-height: 37px;
          text-align: center;
          &.play {
            font-size: 12px;
            border: 2px solid #fff;
            border-radius: 50%;
            .iconfont {
              display: inline-block;
              transform: scale(0.7);
            }
          }
          .iconfont {
            font-size: 22px;
            color: #fff;
          }
        }
      }
    }
  }
}
//小播放器
.mini-play {
  position: fixed;
  z-index: 200;
  left: 0px;
  bottom: 0px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 36px;
  border-top: 1px solid #e4e3e2;
  background-color: rgba(255, 255, 255, 0.9);
  .title {
    flex: 1;
    display: flex;
    .img {
      margin-left: 13px;
      position: relative;
      top: -5px;
      width: 22px;
      height: 22px;
      border: 6px solid #000;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 22px;
        height: 22px;
      }
      &.play {
        animation: rotate 20s linear infinite;
      }
      &.pause {
        animation-play-state: paused;
      }
    }
    h3 {
      height: 36px;
      line-height: 36px;
      font-size: 16px;
      color: #353535;
      margin-left: 10px;
      span {
        font-size: 12px;
        color: #676766;
      }
    }
  }
  .icons {
    display: flex;
    .circle {
      width: 24px;
      height: 24px;
      position: relative;
      margin-top: 5px;
      .iconfont {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
        color: #4d4d4d;
        font-size: 12px;
        text-align: center;
        line-height: 24px;
      }
    }
    .icon-zanting1 {
      font-size: 26px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      margin: 0px 13px 0px 16px;
    }
  }
}
// 播放列表
.playlist {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgb(64 61 61 / 60%);
  .boxtop {
    width: 100%;
    height: 42%;
    // background-color: #676766;
    position: fixed;
    top: 0px;
    left: 0px;
  }
  .boxb {
    animation: donghua 0.3s linear forwards;
  }
  .boxc {
    animation: donghua2 0.3s linear forwards;
  }
  .box {
    width: 92%;
    height: 410px;
    position: fixed;
    border-radius: 20px;
    left: 0px;
    bottom: 5px;
    margin: 0px 14px;
    background-color: #fff;

    ul {
      .at {
        height: 18px;
        line-height: 18px;
        font-size: 16px;
        margin-left: 13px;
        margin-top: 15px;
        font-weight: 600;
        span {
          font-size: 12px;
          color: #adadad;
        }
      }
      .boxlist {
        display: flex;
        justify-content: space-between;
        height: 18px;
        margin-top: 10px;
        .left {
          margin-left: 13px;
          height: 18px;
          line-height: 18px;
          font-size: 14px;
        }
        .rigth {
          height: 18px;
          span {
            margin-right: 15px;
            font-size: 22px;
            color: #adadad;
          }
        }
      }
      li {
        display: flex;
        justify-content: space-between;
        .listop {
          font-size: 14px;
          margin: 8px 0px 8px 13px;
          span {
            font-size: 12px;
            color: #adadad;
          }
        }
        .iconfont {
          height: 14px;
          line-height: 43px;
          margin-right: 13px;
        }
      }
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes donghua {
  from {
    transform: translateY(410px);
  }
  to {
    transform: translateY(0px);
  }
}
@keyframes donghua2 {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(410px);
  }
}
</style>